<template>
  <!-- 准备一个按钮 和文本框点击按钮弹出文本框的内容-->
    <div id="teamList">
      <input type="text" v-bind:value="message"><br/>
      <input type="button" value="弹出" v-on:click="alertTxt($event.toElement)">
      <input type="button" value="改变" v-on:mouseover="changeTxt($event.currentTarget)" v-on:mouseout="changeDefault($event.currentTarget)">
    </div>
</template>

<script>
    export default {
        name: "TeamList",
      data(){
          return {message:"hello",
            txtVal:""
          }//如果一个js事件的值要保存方便下一个js事件使用就 定义出一个变量来保存,注意js中方法要使用你自己在data中定义的变量需要加this因为
        //你在data中定义的变量是定义给vue对象的 this代表当前的vue对象
      },
      methods:{
         alertTxt:function(btn){
           console.log(btn);
           console.log(btn.previousElementSibling.previousElementSibling.value);
         },
        changeTxt:function(btn){//鼠标移入修改文本框的值
          console.log(btn);
          this.txtVal = btn.previousElementSibling.previousElementSibling.previousElementSibling.value;
          btn.previousElementSibling.previousElementSibling.previousElementSibling.value = '123';

        },
        changeDefault:function(btn){//鼠标移入修改文本框的值
          console.log(btn + " 222");
          btn.previousElementSibling.previousElementSibling.previousElementSibling.value = this.txtVal;

        }
      }
    }
</script>

<style scoped>

</style>
